import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'


/**
 * useEffect使得在function静态组件中可以使用生命周期函数
 * 语法：useEffect(callback, [targets])：接受两个参数
 *          1. callback是钩子函数
 *              + 主体是ComponentDidMount和ComponentDidUpdate钩子函数执行
 *              + 若有return，跟的是一个componentWillUnmount钩子函数
 *          2. targets是一个数组，项是一些state状态变量
 *            + 不传：callback会在ComponentDidMount和ComponentDidUpdate时触发
 *                    执行callback
 *            + 传实际的target项：会在因为项而引起的ComponentDidMount和
 *                               ComponentDidUpdate时触发执行callback
 *            + 传[]：只在ComponentDidMount是触发执行callback
 */
function App(props) {
    let [count, setCount] = useState(0)
    let [name, setaName] = useState('jam')
    let [tickCount, setTickCount] = useState(0)

    // 全部didMount和didUpdate
    useEffect(() => {
        console.log('all ComponentDidMount and ComponentDidUpdate triggerd')
        return () => { }
    })
    // 全部仅didMount
    useEffect(() => {
        console.log('all ComponentDidMount triggerd only once');
        return () => { }
    }, [])
    // count的didMount 和 部分的didUpdate
    // 只有改变count才会触发callback，eg：改变name不会触发
    useEffect(() => {
        console.log("count's ComponentDidMount and ComponentDidUpdate triggerd")
        document.title = count
        return () => { }
    }, [count])
    // tick定时器销毁，清除副作用
    useEffect(() => {
        // 仅在ComponentDidMount时生成一个定时器
        const timer = setInterval(() => {
            console.log('定时器还存在')
            setTickCount(++tickCount)
            // setTickCount(tickCount => ++tickCount)
        }, 1000);
        return () => {
            // 销毁前需要清除
            console.log('定时器不存在了')
            clearInterval(timer)
        }
    }, [])
    return (
        <>
            <h1>titleCount: {count}</h1>
            <button onClick={() => { setCount(count + 1) }}>add</button>


            <h1>name: {name}</h1>
            <button onClick={() => { setaName(`${name === 'jam' ? 'ada' : 'jam'}`) }}>changeName</button>


            <h1>tickCount: {tickCount}</h1>
        </>
    )
}

ReactDOM.render(<App />, document.getElementById('root'))
// 6秒后销毁组件
setTimeout(() => { 
    ReactDOM.unmountComponentAtNode(document.getElementById('root')) 
}, 6000)
